//	报表顶部标题
import React from 'react';
import { ComponentsBase } from 'src/services/AnalyseManage/type';
import { defaultPage, selectStyle } from './DefaultConfig';
import styles from './index.module.scss';

const Page = ( props: ComponentsBase ) => {
	let { isCurrent, config, onSelect } = props;
	let handelSelect = () => {
		onSelect( config );
	};
	config = {
		...defaultPage,
		...config
	};
	// console.log( config );
	let headerStyle = {
		// height: `${config.mainTitleHeight || 50}px`,
		backgroundColor: config.mainTitleBackColor,
		fontSize: `${config.mainTitleFontSize}px`,
		fontFamily: config.mainTitleFontFamily,
		// alignItems: config.mainTitleAlignVer || 'center',
		// justifyContent: justifyContent,
		color: config.mainTitleFontColor,
		textDecoration: config.mainTitleIsUnderLine ? 'underline' : 'none',
		fontStyle: config.mainTitleIsItalic ? 'italic' : 'normal',
		fontWeight: config.mainTitleIsBold ? 700 : 400,
		textAlign: config.mainTitleAlignHor,
		alignSelf: config.mainTitleAlignVer,
	};

	return (

		<div className={styles.editor_report_info} style={isCurrent ? selectStyle : null} 
			onClick={() => {
				handelSelect();
			}}>
			<div className={styles.editor_report_info__title} style={headerStyle}>
				{config.name}
			</div>
		</div>

	);
};

export default Page;
